<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax 请求</title>
</head>
<body>
    <ul id="members"></ul>
</body>
<script>
    // JS 异步主动请求数据 界面的动态更新
    // console.log(fetch('https://api.github.com/orgs/lemoncode/members'))
    // ·url 接口地址
    // 网络请求 request
    // response 
    // toJSON() 方法将响应体解析为 JSON 格式
    // dom 操作，更新界面
    // httprequest XML？ 可以主动发起http 请求响应是（XML）JSON的对象
    const xhr = new XMLHttpRequest();
    console.log(xhr.readyState,'------');
    // 打开一个请求
    xhr.open('GET', 'https://api.github.com/orgs/lemoncode/members', false);
    // false 同步请求 阻塞代码执行 等待响应  //无需事件监听，可以直接使用响应数据console.log(xhr.responseText)
    // true 异步请求 不阻塞代码执行 不等待响应  
    console.log(xhr.readyState,'|------');
    // 真正发送出去
    xhr.send();
    console.log(xhr.readyState,'|---|---');
    // 可直接使用响应数据
    console.log(xhr.responseText);
    // 事件监听
    // xhr.onreadystatechange = function () {
    //     console.log(xhr.readyState,'|---|---|---|');
    //     // 响应的状态码
    //     // readyState 4 表示请求已完成，响应已就绪
    //     if (xhr.readyState === 4 && xhr.status === 200) {
    //         console.log(xhr.responseText);
    //         const data = JSON.parse(xhr.responseText);
    //         console.log(data);
    //         document.getElementById('members').innerHTML = data.map(member => `<li>${member.login}</li>`).join('');
    //     }
    // }
</script>
</html>